<template>
  <div :class="className" :style="{ height: height, width: width }">
    <div class="panel monitor">
      <div class="inner">
        <div class="tabs">
          <a href="javascript:;" :class="[isActive ? 'active' : '']" @click="chooseTrainTab">车载设备报警</a>
          <a href="javascript:;" :class="[!isActive ? 'active' : '']" @click="chooseHandleTab">手持设备报警</a>
        </div>
        <div class="content" :class="[isShow ? 'show' : 'hidden']">
          <div class="head">
            <span class="col">报警时间</span>
            <span class="col">车次号</span>
            <span class="col">运行方向</span>
            <span class="col">目标点距离</span>
            <span class="col">当前位置</span>
            <span class="col">安全状态</span>
          </div>
          <div class="marquee-view">
            <div class="marquee">
              <div class="row">
                <span class="col">20180701</span>
                <span class="col">DF01</span>
                <span class="col">上行</span>
                <span class="col">1200</span>
                <span class="col">提示区</span>
                <span class="col">非安全</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">20190601</span>
                <span class="col">DF02</span>
                <span class="col">上行</span>
                <span class="col">300</span>
                <span class="col">提示区</span>
                <span class="col">非安全</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">20190704</span>
                <span class="col">DF03</span>
                <span class="col">上行</span>
                <span class="col">400</span>
                <span class="col">制动区</span>
                <span class="col">非安全</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">20180701</span>
                <span class="col">DF04</span>
                <span class="col">上行</span>
                <span class="col">600</span>
                <span class="col">提示区</span>
                <span class="col">非安全</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">20190701</span>
                <span class="col">DF05</span>
                <span class="col">上行</span>
                <span class="col">2000</span>
                <span class="col">提示区</span>
                <span class="col">非安全</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">20190701</span>
                <span class="col">DF06</span>
                <span class="col">上行</span>
                <span class="col">800</span>
                <span class="col">报警区</span>
                <span class="col">非安全</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">20190701</span>
                <span class="col">DF07</span>
                <span class="col">上行</span>
                <span class="col">100</span>
                <span class="col">制动区</span>
                <span class="col">非安全</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">20190701</span>
                <span class="col">DF08</span>
                <span class="col">上行</span>
                <span class="col">300</span>
                <span class="col">报警区</span>
                <span class="col">非安全</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">20190701</span>
                <span class="col">DF09</span>
                <span class="col">上行</span>
                <span class="col">500</span>
                <span class="col">报警区</span>
                <span class="col">非安全</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">20190710</span>
                <span class="col">DF10</span>
                <span class="col">上行</span>
                <span class="col">900</span>
                <span class="col">提示区</span>
                <span class="col">非安全</span>
                <span class="icon-dot"></span>
              </div>
            </div>
          </div>
        </div>
        <div class="content" :class="[!isShow ? 'show' : 'hidden']">
          <div class="head">
            <span class="col">异常时间</span>
            <span class="col">设备地址</span>
            <span class="col">异常代码</span>
          </div>
          <div class="marquee-view">
            <div class="marquee">
              <div class="row">
                <span class="col">20190701</span>
                <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                <span class="col">1000001</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">20190701</span>
                <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                <span class="col">1000002</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">20190703</span>
                <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                <span class="col">1000002</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">20190704</span>
                <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                <span class="col">1000002</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">20190705</span>
                <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                <span class="col">1000002</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">20190706</span>
                <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                <span class="col">1000002</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">20190707</span>
                <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                <span class="col">1000002</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">20190708</span>
                <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                <span class="col">1000002</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">20190709</span>
                <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                <span class="col">1000002</span>
                <span class="icon-dot"></span>
              </div>
              <div class="row">
                <span class="col">20190710</span>
                <span class="col">北京市昌平区建材城西路金燕龙写字楼</span>
                <span class="col">1000002</span>
                <span class="icon-dot"></span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import resize from './mixins/resize'
export default {
  mixins: [resize],
  props: {
    className: {
      type: String,
      default: 'chart'
    },
    width: {
      type: String,
      default: '100%'
    },
    height: {
      type: String,
      default: '374px'
    }
  },
  data() {
    return {
      chart: null,
      isActive: true,
      isShow: true
    }
  },
  mounted() {},
  beforeDestroy() {},
  methods: {
    chooseTrainTab() {
      this.isActive = true
      this.isShow = true
    },
    chooseHandleTab() {
      this.isActive = false
      this.isShow = false
    }
  }
}
</script>

<style lang="scss" scoped>
.monitor {
  // height: 480px;
  height: 100%;
}
.monitor .inner {
  padding: 0px 0;
  display: flex;
  flex-direction: column;
}
.monitor .tabs {
  padding: 0 36px;
  margin-bottom: 4px;
  display: flex;
}
.monitor .tabs a {
  color: #12e0e3;
  font-size: 12px;
  padding: 0 27px;
}
.monitor .tabs a:first-child {
  padding-left: 0;
  border-right: 2px solid #00f25d;
}
.monitor .tabs a.active {
  color: yellow;
  // background-color: aliceblue;
  display: block;
}
.monitor .content {
  flex: 1;
  position: relative;
  display: none;
}

.monitor .show {
  display: block;
}
.monitor .hidden {
  display: none;
}

.monitor .head {
  display: flex;
  justify-content: space-between;
  line-height: 1.5;
  background-color: rgba(255, 255, 255, 0.1);
  padding: 12px 36px;
  color: #68d8fe;
  font-size: 14px;
}
.monitor .marquee-view {
  // position: absolute;
  top: 0;
  bottom: 0;
  width: 100%;
  overflow: hidden;
  height: 310px;
}

.monitor .row {
  display: flex;
  justify-content: space-between;
  line-height: 1.05;
  font-size: 12px;
  color: #61a8ff;
  padding: 12px 36px;
}
.monitor .row .icon-dot {
  position: absolute;
  left: 16px;
  opacity: 0;
}
.monitor .row:hover {
  background-color: rgba(255, 255, 255, 0.1);
  color: #68d8fe;
}
.monitor .row:hover .icon-dot {
  opacity: 1;
}
.monitor .col:first-child {
  width: 80px;
}
.monitor .col:nth-child(2) {
  width: 200px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
}
.monitor .col:nth-child(3) {
  width: 80px;
}
/* 通过CSS3动画滚动marquee */
.marquee-view .marquee {
  animation: move 5s linear infinite;
}
@keyframes move {
  0% {
  }
  100% {
    transform: translateY(-30%);
  }
}
/* 3.鼠标经过marquee 就停止动画 */
.marquee-view .marquee:hover {
  animation-play-state: paused;
}
</style>
